<template>
    <div>
       <div class="touxaing">
       <van-icon name="arrow-left" @click="$router.go(-1)"/>
       <div class="tou_p">
           <div class="tp">
               <img src="../../assets/头像男 拷贝 4.png" alt="" >
           </div>
           <div class="tpp">
              <span>名称:{{ custData.custName}}</span>
              <span>电话:{{custData.telephone}}</span>
           </div>
          <div class="top" @click="$router.push(`/kehuxiangqing/${$route.params.id}`)">
              <span>客户信息</span>
           
        </div>
       </div>
       <van-icon name="wap-home-o" />
       </div>
       <div class="vanrow">
 <van-grid>
  <van-grid-item icon="" text="收入分析" v-for="item in Listdata" :key="item.key" :class="count==item.sort?'active':''" @click="addp(item.sort) "> 
      <img :src="item.img" alt="">
      <span>{{item.title}}</span>
  </van-grid-item>
</van-grid>
       </div>
      <!-- <div class="shitu">
           <div>
               <ul>
                   <li> 
                       <span>今年</span>
                   <strong> ￥{{Listdata[0].data.year}}</strong>   
                       </li>
                   <li> 
                       <span>总收入</span>
                       <strong>￥{{Listdata[0].data.total}}</strong>
                       </li>
                      
               </ul>
               <p>
                           同比增长{{Listdata[0].data.contrast}}
               </p>
           </div>
      </div>
      <div class="tongji">
          <p>
              <img src="../../assets/收入统计.png" alt="">收入统计
          </p>
          <ul>
              <li v-for="(item,index) in Listdata[0].data.list" :key="index">
                  <span>{{item.year}}年</span>
                  <span class="monny">￥{{item.income}}</span>
              </li>
          </ul>
      </div> -->
      <Shourufenxi :Listdata="Listdata" v-if="count==1"/>
      <Qixiaqiye v-else-if="count==2" :qiaxia="Listdata[3]"/>
      <Hezuohouban v-else-if="count==3" :qiaxiap="Listdata[2]"/>
      <Dangnianshouru v-else-if="count==4"  :qiaxiapp="Listdata[1]"/>
    </div>
</template>
<script>
import {GetustDate} from "@/request/api"
import Shourufenxi from "@/components/客户/Shourufenxi.vue"
import Qixiaqiye from "@/components/客户/Qixiaqiye.vue"
import Hezuohouban from "@/components/客户/Hezuohouban.vue"
import Dangnianshouru from "@/components/客户/Dangnianshouru"
import { List } from 'vant'
export default {
    
    name:"CustomerDetails",
    data () {
        return {
           custData:null,
           count:1,
           Listdata:[
            //    {
            //        id:0,
            //        name:'收入分析',
            //        img:"../../assets/收入分析.png"
            //    },
            //     {
            //         id:1,
            //        name:'旗下企业',
            //        img:"../../assets/旗下企业.png"
            //    },
            //     {
            //         id:2,
            //        name:'合作伙伴',
            //        img:"../../assets/合作伙伴.png"
            //    },
            //     {
            //         id:3,
            //        name:'当年收入',
            //        img:"../../assets/当年收入.png"
            //    },
           ]
 
        }
    },
    methods:{
      addp(val){
          this.count=val
          console.log(val);
      }
    },
    components:{
        Shourufenxi,Qixiaqiye,Hezuohouban,Dangnianshouru
    },
    created(){
       GetustDate(this.$route.params.id).then((res)=>{
           this.custData=res.data.data
           this.Listdata=res.data.data.datas
           console.log("dssddsgsg:",res);
           console.log("客户视图数据:",this.Listdata);
       })
    }
}
</script>
 
<style lang = "less" scoped>
   .touxaing{
       height: 1.5rem;
       background:#003399 ;
       font-size: .24rem;
       line-height: 1.5rem;
       color: white;
       display: flex;
      align-items: baseline;
       .van-icon{
           width: .5rem;
           text-align: center;
           position: relative;
    top: -0.6rem;
       }
       .tou_p{
          height: 1rem;
    background: #fff;
    display: flex;
    font-size: .14rem;
    flex: 1;
    position: relative;
    top: 0.5rem;
    border-top-left-radius: .1rem;
    border-top-right-radius: .1rem;
    .tp{
      
        height: 100%;
        img{
            height: 100%;
        }
    }
    .tpp{
        display: flex;
    flex-wrap: wrap;
    align-content: center;
        span{
            display: block;
           
         
            line-height: .4rem;
            color: #333;
        }
    }
    .top{
        font-size: .14rem;
    line-height: 1rem;
    color: blue;
    span{
        display: inline-block;
    height: .4rem;
    background: #ffcc33;
    line-height: .4rem;
    width: .56rem;
    text-align: center;
    border-top-left-radius: .1rem;
    border-bottom-left-radius: .1rem;
    color: #ffff;
    }
    }
       }
   }
   .vanrow{
       font-size: .14rem;
   }
   .active{
       border-bottom: .02rem solid #ffcc33;
   }
   .van-grid-item{
       img{
           width: 100%;
           height: 100%;
       }
   }
  /*  .shitu{
       font-size: .14rem;
       background: #fff;
       color: black;
          
        p{
        width: 1.5rem;
    height: .4rem;
    line-height: .4rem;
    text-align: center;
    background: #f4f6f7;
     margin-left: .3rem;
    }
       ul{
           display: flex;
           li{
               flex: 1;
               text-align: center;
            border-right: .01rem solid #efefef;
    text-align: center;
    display: flex;
    flex-flow: column;
    span{
            padding-top: .15rem;
    }
   
    strong{
            padding: .15rem 0;
            color: #ffcc33;
            font-size: .2rem;
    }
           }
       }
       
   }
   .tongji{
           font-size: .14rem;
           background: #fff;
           p{
             display: flex;
    align-items: center;
    height: .4rem;
    line-height: .4rem;
    padding: .3rem 0;
    margin-left: .2rem;
           }
           ul{
               li{
                   height: .5rem;
    line-height: .5rem;
    display: flex;
    justify-content: space-around;
    border-top: 1px dashed #f6f6f6;
    .monny{
        color: #ffe5a7;
    }
               }
           }
       } */
</style>